<template>
  <view class="recommend" v-if="home.recommend">
    <view class="item" v-for="item in home.recommend" :key="item.id" @click="goProduct(item)">
      <v-image :url="item.mainImage.path" v-if="item.mainImage" :width="'300rpx'" :height="'300rpx'" />
      <view class="desc">
        <view class="title two-lines">{{ item.title }}</view>
        <view class="title_sub one-lines" v-if="item.title_sub">{{ item.title_sub }}</view>
      </view>
      <v-price :product="item" class="price" />
      <view class="btn">立即购买</view>
    </view>
  </view>
</template>

<script>

import Image from '../../../../components/image/index'
import Price from '../../../../components/price/index'

export default {
  props: ['home'],
  components: {
    'v-image': Image,
    'v-price': Price,
  },
  data() {
    return {

    }
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    }
  },
  created() {
  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.recommend {
  //background: white;
  margin: 0 20rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20rpx 0;
  gap: 20rpx;
  border-radius: 10rpx;
  margin-bottom: -20rpx;
  margin-top: -20rpx;
  .item {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10rpx;
    padding: 20rpx;
    position: relative;
    .desc {
      padding-bottom: 20rpx;
      text-align: left;
      .title {
        line-height: 1.35em;
        color: #4b4b4b;
        font-weight: 700;
        margin: 20rpx 0 10rpx 0;
        font-size: 28rpx;
        text-align: left;
      }
      .title_sub {
        color: #bbbbbb;
        font-size: 24rpx;
        text-align: left;
      }
    }
    .price {
      //display: flex;
      //flex-direction: column;
      //justify-content: start;
      //align-items: start;
    }
    .btn {
      background: #ff212a;
      color: white;
      font-size: 24rpx;
      border-radius: 10rpx;
      display: inline-block;
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      padding: 5rpx;
    }
  }
}
</style>
